<template>
  <div id="root">
       <van-row>
      <van-col span="24" id="hh">
        <van-nav-bar
          title="需求发布界面"
        />
      </van-col>
    </van-row>
    <div class="body">
      <img :src="urAvatar" alt="" />
      <p id="font">需求标题，必填（需求简介）</p>
      <div class="search">
        <input type="text" placeholder="请输入需求标题" v-model="order.ofTitle" />
      </div>
      <p id="font">具体需求描述，必填</p>
      <div class="search">
        <input id="ms" type="text" placeholder="请输入具体需求" v-model="order.ofDescribe" />
      </div>
      <p id="font">赏金</p>
      <div class="search">
        <input type="text" placeholder="请输入赏金" v-model="order.ofPrice" />
      </div>
      <p id="font">口令红包</p>
      <div class="search">
        <input type="text" placeholder="请输入口令红包" v-model="order.ofRedPackets" />
      </div>
      <p id="font">请选择标签</p>
      <van-dropdown-menu active-color="#1989fa" direction="up">
        <van-dropdown-item v-model="order.ofLabel" :options="option1" />
      </van-dropdown-menu>
      <button id="fabu" @click="sub">发布</button>
    </div>
    <br>
    <br>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="search"><a href="https://xiaoqing.work/didi/" id="aa">首页</a></van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="rw">任务大厅</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="my">我要帮忙</van-tabbar-item>
      <van-tabbar-item @click="my">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Toast } from "vant";
import api from "@/api/order";
export default {
  methods: {
    my() {
      this.$router.push("/PD");
    },
    rw() {
      this.$router.push("/JieDan");
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onConfirm(value) {
      //   Toast(`当前值：${value}, 当前索引：${index}`);
      this.tag = value;
    },
    onCancel() {
      Toast("取消");
    },
    sub() {
      console.log(this.order);
      api.addOrder(this.order).then((res) => {
        this.$dialog({
          message: res.data.message,
        });
        // this.updateNew()
      });
    },
  },
  data() {
    return {
      active: 2,
      icon: {
        active: "https://img01.yzcdn.cn/vant/user-active.png",
        inactive: "https://img01.yzcdn.cn/vant/user-inactive.png",
      },
      urAvatar: localStorage.getItem("userAvatar"),
      value1: 0,
      option1: [
        { text: "Java", value: "Java" },
        { text: "Android", value: "Android" },
        { text: "Java Web", value: "Java Web" },
        { text: "MySql", value: "MySql" },
        { text: "Html+Css", value: "Html+Css" },
        { text: "JavaScript", value: "JavaScript" },
        { text: "Python", value: "Python" },
        { text: "Spring Boot", value: "Spring Boot" },
      ],
      order: {
        ofTitle: "",
        ofDescribe: "",
        ofLabel: "Java",
        ofUrId: localStorage.getItem("tokenlo"),
        ofPrice: "",
        ofRedPackets: "",
      },
      columns: [
        "Java",
        "Android",
        "JavaWeb",
        "Html+Css",
        "JavaScript",
        "Python",
        "MySQL",
      ],
    };
  },
};
</script>

<style scope>
* {
  margin: 0;
  padding: 0;
}
#root #head {
  width: 100%;
  height: 50px;
  background-color: rgb(235 235 235);
}
#root #head span {
  line-height: 50px;
  margin-left: 10px;
}
center p {
  margin-top: -34px;
}
#root .body {
  width: 90%;
  /* height: 100px; */
  margin: 0 auto;
  border-radius: 8px;
  margin-top: 70px;
  /* background-color: #f40; */
  box-shadow: 2px 2px 5px #9b9b9b;
}
#root .body img {
    position: relative;
    bottom: 40px;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: -25px;
}
#root .body #font {
  font-weight: 800;
  margin-left: 3%;
}
.search {
  text-align: center;
  margin-top: 10px;
}
.search input {
  margin: 0 auto;
  padding: 0 10px;
  width: 85%;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  color: rgb(32, 32, 32);
  background: rgba(236, 236, 236, 0.15);
}
.search #ms {
  height: 90px;
}
#fabu {
  width: 90%;
  height: 40px;
  margin: 20px;
  border-radius: 20px;
  background-color: #0072e3;
  border: 0;
  color: #fff;
}
</style>